import * as React from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import Markdown from './Markdown';
import {useParams} from 'react-router-dom'
import { useEffect, useState } from "react";
import {getBlogById} from "./Api"



export default function BlogDetail() {
  const params = useParams()
  const id = params.id as string
  const [blog,setBlog] = useState<{title:string,content:string}>({title:"",content:""})
  console.log("Index")
  
useEffect(()=>{
  setBlog(getBlogById(id))
  console.log("getCategory"+JSON.stringify(blog))
},[id])

  return (
    <Grid
      item
      xs={12}
      md={8}
      sx={{
        '& .markdown': {
          py: 3,
        },
      }}
    >
      <Typography variant="h6" gutterBottom>
        {blog.title}
      </Typography>
      <Divider />
        <Markdown className="markdown" key={blog.content.substring(0, 40)}>
          {blog.content}
        </Markdown>
    </Grid>
  );
}
